@import 'px2rem.scss';
$designWidth:750;

body {
	font-family: helvetica;
	margin: 0 auto;

	max-width: 1500px;
}


body * {
	-webkit-user-select: none;
	-webkit-touch-callout: none;
	-webkit-text-size-adjust: 100%;
}
a,button,input {
	-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
button,input {
	-webkit-appearance: none;
	border-radius: 0;
}
a {
	text-decoration: none;
}
input {
	outline: none;
	vertical-align: middle;
	padding: 0;
}
ul{
	margin: 0;
	padding: 0;
	list-style: none;
}
img{
	vertical-align: middle;
}
h3,h4,p{
	margin: 0;
}
.left {
	float: left;
}
.right {
	float: right;
}
.clearfix:after {
	content: '';
	display: block;
	clear: both;
}

/* header */
#header{
	height: 100px;
	line-height: 100px;
	background: #d22147;
	font-size: 28px;

	display: flex;
	align-items: center;
}
#header a:nth-of-type(1){
	color: #fff;
	text-align: center;

	flex: 0 0 160px;
}
#header a:nth-of-type(1)::after{
	content: '';
	display: inline-block;
	width: 25px;
	height: 14px;
	background: url(../images/ico_01.png) no-repeat center;
	background-size: cover;
	margin-left: 8px; 
}

#header div{
	flex: 1;
}
#header div input{
	width: 100%;
	height: 64px;
	border-radius: 16px;
	border: none;
	color: #e2c2c9;
	text-indent: 68px;
	background: #ae3e56 url(../images/ico_02.png) no-repeat 16px 10px;
    background-size: 42px 44px;
    font-size: 28px;
}

#header a:nth-of-type(2){
	color: #fff;
	text-align: center;

	flex: 0 0 138px;
}
#header a:nth-of-type(2)::before{
	content: '';
	display: inline-block;
	width: 26px;
	height: 26px;
	background: url(../images/ico_03.png) no-repeat center;
	background-size: cover;
	margin-right: 10px; 
}

/* banner */
#banner{
	text-align: center;
}
#banner a img{
	width: 100%;
}

/* nav */
#nav ul{
	font-size: 0;
	padding: px2rem(20) 0;
	background: #f2f0f0;
}
#nav li{
	width: 25%;
	display: inline-block;
	text-align: center;
	margin: px2rem(20) 0;
}
#nav li a{
	font-size: px2rem(28);
	color: #525252;
}
#nav li img{
	width: px2rem(75);
	height: px2rem(75);
	display: block;
	margin: 0 auto px2rem(10) auto;
}

/* ad1 */
#ad1 a{
	float: left;
}
#ad1 a img{
	width: px2rem(250);
	height: px2rem(250);
}

/* ad2 */
#ad2{
	background: #f2f0f0;
	padding: px2rem(30) 0;
}
#ad2 img{
	width: 100%;
}

/* list */
#list h3{
	font-size: px2rem(32);
	line-height: px2rem(80);
	color: #131313;
	font-weight: normal;
	padding-left: px2rem(20);

	border-bottom: 1px solid #d2d1d4;
}
#list h3::before{
	content: '';
	display: inline-block;
	width: px2rem(8);
	height: px2rem(32);
	background: #cc0530;
	border-radius: px2rem(5);
	margin-right: px2rem(20);
	vertical-align: middle;
}
#list h3 span{
	vertical-align: middle;
}

#list article{
	border-bottom: 1px solid #c1c0c5;
}
#list article a{
	padding: px2rem(20);
	display: flex;
}
#list article .img{
	flex: 0 0 auto;
	padding-right: px2rem(30);
}
#list article .img img{
	width: px2rem(214);
	height: px2rem(194);
}

#list article .text{
	flex: 2 2 auto;
}
#list article .text h4{
	font-size: px2rem(28);
	color: #181818;
	line-height: px2rem(61);
	margin-bottom: px2rem(5);
}
#list article .text p{
	font-size: px2rem(24);
	color: #979797;
	line-height: px2rem(36);
	margin-bottom: px2rem(19);

	display: -webkit-box;	
	-webkit-box-orient: vertical;
	overflow: hidden;
	-webkit-line-clamp: 2;	/* 设置文本显示的行数 */
}

#list article .text div{
	font-size: px2rem(24);
	height: px2rem(34);
	line-height: px2rem(34);
	color: #525252;
}
.text div strong{
	color: #cc0530;
	margin: 0 px2rem(9);
}
.text .discount{
	display: inline-block;
	width: px2rem(84);
	height: px2rem(33);
	color: #fff;
	padding-left: px2rem(15);
	margin-left: px2rem(15);
	box-sizing: border-box;

	background: url(../images/ico_04.gif) no-repeat;
	background-size: cover;
	vertical-align: middle;
}
.text .red{
	float: right;
	background: url(../images/ico_05.png) no-repeat left  px2rem(3);
	background-size: px2rem(24) px2rem(22); 
	padding-left: px2rem(28);
}

